<template>
	<view class="beforLogin">
		<image src="https://sm.hobon.cc/static/bg.png" class="bg"></image>
		<view class="logo-wrapper">
			<image src="/static/image/logo-black.png" mode="widthFix" class="logo"></image>
		</view>
		<view class="title">
			四季鲜集配
		</view>
		<view class="tip">
			非开放系统，仅供已开通供应商账号的工作人员登录使用
		</view>
		<view class="tip-content">
			<view class="p">
				《四季鲜集配供应商》微信小程序，即四季鲜集配供货管理系统，提供平台供货相关功能。
			</view>
			<view class="p">
				本小程序仅供已开通供应商账号的工作人员使用，非开放系统，不提供公开注册申请，不提供功能体验。
			</view>
			<view class="p">
				如您已有供应商登录账号，请点击下面按钮去登录。
			</view>
			<view class="p">
				否则，您将无法登录，请关闭小程序。
			</view>
		</view>

		<button class="btn-wrapper" @click="goLogin">
			<!-- <image src="https://adimg.yooowu.com/static/images/login/wx_icon.png" mode="widthFix" class="icon"></image> -->
			<text>去登录</text>
		</button>
		<view class="small-btn" @click="goBack">
			取消登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			goBack() {
				uni.exitMiniProgram()
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.beforLogin {
		overflow: hidden;
		text-align: center;
		padding-top: 30%;
		height: 100vh;

		.bg {
			position: fixed;
			width: 100%;
			height: 100vh;
			left: 0;
			top: 0;
		}

		.logo-wrapper {
			position: relative;
			margin: 0 auto 0 auto;

			.logo {
				width: 166upx;
				//height: 145upx;
			}
		}

		.title {
			font-size: 38upx;
			color: #000;
			position: relative;
			margin-top: 10upx;
			//text-shadow: 1upx 0 #666;
		}

		.tip {
			font-size: 24upx;
			color: #000;
			position: relative;
			//text-shadow: 1upx 0 #999;
			margin-top: 30upx;
		}

		.tip-content {
			position: relative;
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 30upx 40upx;
			padding: 30upx;

			.p {
				line-height: 40upx;
				font-size: 32upx;
				text-align: left;
				margin-top: 14upx;

				&:first-child {
					margin-top: 0;
				}
			}
		}

		.btn-wrapper {
			margin: 100upx auto 30upx auto;
			width: 600upx;
			height: 89upx;
			display: flex;
			justify-content: center;
			align-items: center;
			//background: red;
			position: relative;
			color: #ffffff;
			font-size: 32upx;
			background: linear-gradient(267deg, #1eaf22 0%, #73e008 100%);
			border-radius: 44upx;
			box-shadow: 0px 22upx 81upx 0px #a8f4a1;

			.icon {
				width: 38upx;
				height: 32upx;
				position: relative;
				top: 4upx;
				margin-right: 10upx;
			}
		}

		.small-btn {
			color: #888888;
			position: relative;
			margin-bottom: 20rpx;
		}
	}
</style>